﻿@model IQueryable<Home.Site.Models.DataLayer.MusicPlaylist>
<link href="~/Content/music-box/css/inlineplayer.css" rel="stylesheet" />
<link href="~/Content/music-box/css/flashblock.css" rel="stylesheet" />
<script src="~/Scripts/music-box/soundmanager2-nodebug-jsmin.js"></script>
<script src="~/Scripts/music-box/inlineplayer.js"></script>
<style type="text/css">
    #soundmanager-debug {
        /* SM2 debug container (optional, makes debug more useable) */
        position: absolute;
        position: fixed;
        *position: absolute;
        bottom: 10px;
        right: 10px;
        width: 50em;
        height: 18em;
        overflow: auto;
        background: #fff;
        margin: 1em;
        padding: 1em;
        border: 1px solid #999;
        font-family: "lucida console",verdana,tahoma,"sans serif";
        font-size: x-small;
        line-height: 1.5em;
        opacity: 0.9;
        filter: alpha(opacity=90);
    }
</style>
<div id="sm2-container">
    <!-- SM2 flash goes here -->
</div>
<ul class="graphic">
    @foreach (var album in Model)
    {
        var i = 0;
        foreach (var item in album.Musics)
        {
            <li>
                <a data-volume="100" href="/MusicFiles/@User.Identity.Name/@item.filename" class="sm2_link">@item.name</a>
                <span style="margin-left:-40px;">
                    @{
                        var inlineMp3Soundid = string.Format("inlineMP3Sound{0}",i);
                        i++;
                    }
                    <span class="plusVolume" data-id="@inlineMp3Soundid"><i title="Громче" class="icon-plus"></i></span>
                    <span class="minusVolume" data-id="@inlineMp3Soundid"><i title="Тише" class="icon-minus"></i></span>
                </span>
            </li>
        } 
    }
</ul>
<script type="text/javascript">
    $(document).ready(function () {
        $(".plusVolume").on("click", function () {
            var m = $(this);
            var p = m.closest("li").find("a");
            var s = parseInt(p.attr("data-volume"));
            if (s != 100) { s += 20; }
            p.attr("data-volume", s);
            soundManager.setVolume(m.attr("data-id"), s);
        });
        $(".minusVolume").on("click", function () {
            var m = $(this);
            var p = m.closest("li").find("a");
            var s = parseInt(p.attr("data-volume"));
            if (s != 0) { s -= 20; }
            p.attr("data-volume", s);
            soundManager.setVolume(m.attr("data-id"), s);            
        });
    });
</script>
